<template>
    <div class="px-6">
        <!-- 基础配置 -->
        <div class="pt-2">
            <el-form-item label="应用图标" prop="logo">
                <upload-single v-model="formData.logo" />
            </el-form-item>
            <el-form-item label="应用名称" prop="name">
                <el-input
                    v-model="formData.name"
                    placeholder="给应用设置一个名称"
                    maxlength="32"
                />
            </el-form-item>
            <el-form-item label="应用介绍" prop="intro">
                <el-input
                    v-model="formData.intro"
                    placeholder="给您的AI应用一个介绍"
                    type="textarea"
                    :rows="5"
                />
            </el-form-item>
        </div>

        <!-- 知识库配置 -->
        <div class="pt-4 pb-2 border-t border-light">
            <h3 class="mb-2 text-lg font-medium">知识库配置</h3>
            <div class="invoke-widget">
                <div class="inv-header">
                    <div class="flex items-center flex-1">
                        <icon name="el-icon-MessageBox" :size="20" />
                        <span class="ml-2 font-medium text-tx-regular">关联知识库</span>
                    </div>
                    <el-button link :icon="Plus" @click="popupType = 'know'">选择</el-button>
                    <el-button link :icon="Edit" @click="popupType = 'params'">参数</el-button>
                </div>
                <div class="p-2">
                    <table class="inv-chakra-table">
                        <thead>
                            <tr>
                                <th>搜索模式</th>
                                <th>引用上限</th>
                                <th>最低相似度</th>
                                <th>结果重排</th>
                                <th>问题优化</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ searchMode[formData.search_mode] }}</td>
                                <td>{{ formData.search_tokens }}</td>
                                <td>{{ formData.search_similar }}</td>
                                <td>{{ formData.ranking_status ? '✅' : '❌' }}</td>
                                <td>{{ formData.optimize_ask ? '✅' : '❌' }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="inv-select-table">
                        <div
                            v-for="(item, index) in (formData.knows as RobotSmarterKnows[])"
                            :key="index"
                            class="select-item"
                        >
                            <photos width="38px" height="38px" radius="6px" :src="item.logo" />
                            <div class="flex-1 ml-2">
                                <h3 class="font-medium mb-px">{{ item.name }}</h3>
                                <p class="text-xs text-info">{{ item.vector_name }}</p>
                            </div>
                            <icon
                                class="delete"
                                name="el-icon-Delete"
                                @click="handleDeleteKb(index)"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- MCP配置 -->
        <div class="pt-4 pb-2 border-t border-light">
            <h3 class="mb-2 text-lg font-medium">MCP配置</h3>
            <div class="invoke-widget">
                <div class="inv-header">
                    <div class="flex items-center flex-1">
                        <icon name="el-icon-Connection" :size="20" />
                        <span class="ml-2 font-medium text-tx-regular">关联MCP</span>
                    </div>
                    <el-button link :icon="Plus" @click="popupType = 'mcp'">选择</el-button>
                </div>
                <div v-if="formData.mcps.length > 0" class="p-2">
                    <div class="inv-select-table !mt-0">
                        <div
                            v-for="(item, index) in (formData.mcps as RobotSmarterMcps[])"
                            :key="index"
                            class="select-item"
                        >
                            <photos width="38px" height="38px" radius="6px" :src="item.logo" />
                            <div class="flex-1 ml-2">
                                <h3 class="font-medium mb-px">{{ item.name }}</h3>
                                <p class="text-xs text-info">{{ item.code }}</p>
                            </div>
                            <icon
                                class="delete"
                                name="el-icon-Delete"
                                @click="handleDeleteMcp(index)"
                            />
                        </div>
                    </div>
                </div>
                <div v-if="formData.mcps.length === 0" class="inv-empty-table">
                    <el-empty
                        :image-size="48"
                        description="暂无关联"
                        style="padding: 0"
                    />
                </div>
            </div>
        </div>

        <!-- 回答设置 -->
        <div class="pt-4 border-t border-light">
            <h3 class="mb-2 text-lg font-medium">回答设置</h3>
            <div class="flex items-center gap-14">
                <el-form-item label="显示引用" prop="is_show_quote" class="!mb-2" label-width="70px">
                    <el-switch
                        v-model="formData.is_show_quote"
                        inline-prompt
                        active-text="开启"
                        inactive-text="关闭"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>
                <el-form-item label="显上下文" prop="is_show_context" class="!mb-2" label-width="70px">
                    <el-switch
                        v-model="formData.is_show_context"
                        inline-prompt
                        active-text="开启"
                        inactive-text="关闭"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>
            </div>
            <div class="flex items-center gap-14">
                <el-form-item label="显示耗时" prop="is_show_timed" class="!mb-2" label-width="70px">
                    <el-switch
                        v-model="formData.is_show_timed"
                        inline-prompt
                        active-text="开启"
                        inactive-text="关闭"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>
                <el-form-item label="猜您想问" prop="question_guide" class="!mb-2" label-width="70px">
                    <el-switch
                        v-model="formData.question_guide"
                        inline-prompt
                        active-text="开启"
                        inactive-text="关闭"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>
            </div>

            <el-form-item label="原答案回复" prop="is_original_reply" class="!mb-2">
                <el-radio-group v-model="formData.is_original_reply" >
                    <el-radio :value="0">关闭</el-radio>
                    <el-radio :value="1">开启</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="空检索回复" prop="empty_search_type" class="!mb-2">
                <el-radio-group v-model="formData.empty_search_type">
                    <el-radio value="ai">AI回复</el-radio>
                    <el-radio value="default">自定义回复</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="formData.empty_search_type === 'default'" label="无引用回复">
                <el-input
                    v-model="formData.empty_search_text"
                    placeholder="当不能从知识库匹配到内容时,返回当前内容"
                    type="textarea"
                    :autosize="{ minRows: 6, maxRows: 6 }"
                    :maxlength="1000"
                    show-word-limit
                    clearable
                />
            </el-form-item>
        </div>

        <!-- 文件上传 -->
        <div class="pt-4 pb-8 border-t border-light">
            <h3 class="mb-2 text-lg font-medium">文件上传</h3>
            <el-form-item label="文档上传" prop="is_show_quote" class="!mb-2">
                <el-switch
                    v-model="formData.is_upload_files"
                    inline-prompt
                    active-text="开启"
                    inactive-text="关闭"
                    :active-value="1"
                    :inactive-value="0"
                />
            </el-form-item>
            <el-form-item label="图片上传" prop="is_show_context" class="!mb-2">
                <el-switch
                    v-model="formData.is_upload_image"
                    inline-prompt
                    active-text="开启"
                    inactive-text="关闭"
                    :active-value="1"
                    :inactive-value="0"
                />
            </el-form-item>
            <el-form-item label="最大文件数量" prop="is_show_context" class="!mb-2">
                <div class="w-[80%]">
                    <el-slider
                        v-model="formData.max_upload_num"
                        :min="0"
                        :max="15"
                        :marks="{0: '0', 15: '15'}"
                    />
                </div>
            </el-form-item>
        </div>

        <!-- 语音播报 -->
        <div v-if="broadcastSwitch" class="pt-4 pb-8 border-t border-light">
            <h3 class="mb-2 text-lg font-medium">语音播报</h3>
            <el-form-item label="语音模型" prop="is_show_quote" class="!mb-3">
                <div class="w-[60%]">
                    <broadcast-select
                        v-model="formData.broadcast"
                    />
                </div>
            </el-form-item>
            <el-form-item
                v-if="formData.broadcast.model"
                label="播放语速"
                prop="broadcast.speed"
                class="!mb-2"
            >
                <div class="w-[60%]">
                    <el-slider
                        v-model="formData.broadcast.speed"
                        :min="formData.broadcast?.speed_range[0]"
                        :max="formData.broadcast?.speed_range[1]"
                        :step="formData.broadcast?.speed_range[2]"
                    />
                </div>
            </el-form-item>
        </div>

        <!-- 知识库参数 -->
        <popup-know-params
            :show="popupType === 'params'"
            :mode="formData.search_mode"
            :tokens="formData.search_tokens"
            :similar="formData.search_similar"
            :ranking="formData.ranking_status"
            :optimize="formData.optimize_ask"
            :annexSimilar="formData.annex_similar"
            :rankingScore="formData.ranking_score"
            :rankingModel="formData.ranking_model"
            :optimizeModel="formData.optimize_model"
            @close="popupType = ''"
            @confirm="handleConfirmConf"
        />

        <!-- 知识库选择 -->
        <popup-know-select
            :show="popupType === 'know'"
            :knows="formData.knows"
            :bot="formData.code"
            @close="popupType = ''"
            @confirm="handleConfirmKnow"
        />

        <!-- Mcp选择 -->
        <popup-mcp-select
            :show="popupType === 'mcp'"
            :mcps="formData.mcps"
            :bot="formData.code"
            @close="popupType = ''"
            @confirm="handleConfirmMcp"
        />
    </div>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import { Plus, Edit } from '@element-plus/icons-vue'
import useAppStore from '~/stores/app'
import PopupKnowParams from '../../_components/popup-know-params.vue'
import PopupKnowSelect from '../../_components/popup-know-select.vue'
import PopupMcpSelect from '../../_components/popup-mcp-select.vue'

const props = defineProps<{
    modelValue: Record<string, any>
}>()

const emits = defineEmits<{
    (event: 'update:modelValue', value: Record<string, any>): void
}>()

const formData = useVModel(props, 'modelValue', emits)

const appStore = useAppStore()
const broadcastSwitch = computed(() => appStore.config.switch.broadcast)

// 弹出类型
const popupType = ref<string>('')

// 检索模式
const searchMode: any = {
    similar: '语义检索',
    full: '全文检索',
    mix: '混合检索'
}

/**
 * 知识库选择
 *
 * @param knows
 * @author zero
 */
const handleConfirmKnow = (knows: any) => {
    popupType.value = ''
    formData.value.knows = knows
}

/**
 * Mcp选择
 *
 * @param mcps
 * @author zero
 */
const handleConfirmMcp = (mcps: any) => {
    popupType.value = ''
    formData.value.mcps = mcps
}


/**
 * 知识库配置
 *
 * @param config
 * @author zero
 */
const handleConfirmConf = (config: any) => {
    formData.value.search_mode = config.mode
    formData.value.search_tokens = config.tokens
    formData.value.search_similar = config.similar
    formData.value.ranking_status = config.ranking ? 1 : 0
    formData.value.optimize_ask = config.optimize ? 1 : 0
    formData.value.annex_similar = config.annex_similar
    formData.value.ranking_score = config.ranking_score
    formData.value.ranking_model = config.ranking_model
    formData.value.optimize_model = config.optimize_model
    popupType.value = ''
}

/**
 * 知识库删除
 *
 * @param index
 * @author zero
 */
const handleDeleteKb = (index: number) => {
    formData.value.knows.splice(index, 1)
}

/**
 * MCP删除
 *
 * @param index
 * @author zero
 */
const handleDeleteMcp = (index: number) => {
    formData.value.mcps.splice(index, 1)
}
</script>

<style scoped lang="scss">
.invoke-widget {
    margin: 10px 0;
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    .inv-header {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        background-color: var(--el-bg-color-lighter);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    .inv-chakra-table {
        width: 100%;
        overflow: hidden;
        font-size: 13px;
        font-variant-numeric: lining-nums tabular-nums;
        border-collapse: collapse;
        background-color: var(--el-bg-color-light);
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 12px;
        th {
            padding: 12px 0;
            padding-inline: 24px;
            font-size: 12px;
            color: var(--el-text-color-regular);
            text-align: start;
        }
        td {
            padding-inline: 24px;
            padding-bottom: 8px;
            font-size: 12px;
            font-weight: 500;
            color: var(--el-text-color-regular);
            text-align: start;
        }
    }
    .inv-select-table {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 10px;
        border-radius: 12px;
        .select-item {
            display: flex;
            align-items: center;
            padding: 8px ;
            border: 1px solid var(--el-border-color-light);
            border-radius: 12px;
            &:hover .delete {
                display: block;
                cursor: pointer;
            }
            .delete {
                display: none;
                &:hover {
                    color: var(--el-color-error);
                }
            }
        }
    }
    .inv-empty-table {
        padding: 10px 0;
        border-radius: 8px;
        :deep(.el-empty__description) {
            margin-top: 10px;
            p {
                font-size: var(--el-font-size-extra-small);
            }
        }
    }
}
</style>
